<template>
    <div class="tag-list-container">
        <!-- 标签列表卡片 -->
        <el-card shadow="hover" header="标签列表" class="tag-card">
            <!-- 循环渲染标签name -->
            <div class="tag-wrapper">
                <el-tag v-for="(tag, idx) in tagList" :key="idx" type="info" size="medium">
                    {{ tag.name }}
                </el-tag>
            </div>

            <!-- 分页组件（适配大量标签，保留基础分页功能） -->
            <div class="tag-pagination" v-if="total > 0">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="pageParams.current" :page-sizes="[20, 50, 100]" :page-size="pageParams.size"
                    layout="total, sizes, prev, pager, next, jumper" :total="total">
                </el-pagination>
            </div>
        </el-card>
    </div>
</template>

<script>
export default {
    name: 'TagList',
    data() {
        return {
            tagList: [], // 存储标签数据（仅用id和name）
            total: 0, // 标签总条数
            pageParams: { // 分页参数
                current: 1, // 当前页
                size: 20 // 每页条数
            }
        };
    },
    created() {
        // 页面初始化时请求标签列表
        this.getTagList();
    },
    methods: {
        /**
         * 获取标签列表数据
         */
        async getTagList() {
            const res = await this.$axios.post(
                'http://47.104.167.34:9110/api/tag/list',
                this.pageParams // POST请求传递分页参数
            );
            if (res.data.success) {
                this.tagList = res.data.data; // 赋值标签数据
                this.total = res.data.data.length; // 接口无total时，用数据长度暂代
            } else {
                this.$message.error(`获取标签失败：${res.data.message || '未知错误'}`);
            }
        },

        /**
         * 每页条数改变：重新请求列表
         */
        handleSizeChange(val) {
            this.pageParams.size = val;
            this.getTagList();
        },

        /**
         * 当前页改变：重新请求列表
         */
        handleCurrentChange(val) {
            this.pageParams.current = val;
            this.getTagList();
        }
    }
};
</script>

<style scoped>
.tag-list-container {
    padding: 20px;
}

.tag-card {
    max-width: 1200px;
    margin: 0 auto;
}

.tag-wrapper {
    padding: 15px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    /* 标签之间的间距，优化展示 */
}

.tag-pagination {
    margin-top: 20px;
    text-align: right;
}
</style>